<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/register.css">
    <link rel="stylesheet" href="../css/common-part.css">
    <script>
        // 解除遮罩层，需求：当我们点击close按钮的时候关闭这个遮罩层
        window.onload=function(){
            var btn =document.querySelector(".page-dislog .dislog-content .link-close");
            var dislogEl=document.querySelector(".page-dislog");
            console.log(btn)
            btn.onclick=function(){
                dislogEl.remove();
            }
        }
    </script>
</head>
<body>
    <!-- 注册页面头部位置 -->
    <div class="header">
        <div class="header-left"><a class="header-link" href="#">欢迎注册</a></div>
        <div class="header-right"><a class="header-islink" href="#">已有账号？<span class="header-login">请登录</span></a></div>
    </div>
    <!-- 版心位置内容 -->
    <div class="header-c">
        <!-- 注册流程模块 -->
        <div class="proc">
            <div class="proc-step margin-left-150">
            <a  class="proc-img"  href="#"><img src="../image/Icon1+Activelose.png"></a>
            <a class="proc-desc" href="#">验证手机号</a>
            </div>
            <div class="proc-line bule"></div>
            <div class="proc-step">
            <a  class="proc-img" href="#"><img src="../image/Icon1+Active.png"></a>
            <a class="proc-desc" href="#">填写验证信息</a>
            </div>
            <div class="proc-line"></div>
            <div class="proc-step">
            <a class="proc-img"  href="#"><img src="../image/Icon1+Normal.png"></a>
            <a class="proc-desc" href="#">注册成功</a>
            </div>
        </div>
        <!-- 表单区域 -->
       <form class="form-area">
            <div class="input-box">
                <div class="input-label">中国+86</div>
                <input type="text" class="phone">
            </div>
            <a href="#" class="verify-btn">点击按钮进行验证</a>
            <a href="#" class="next-btn">下一步</a>
            <div class="select-btn">
                <a class="btn-inner-user" href="#">企业用户注册</a>
                <a class="btn-out-user" href="#">海外用户注册</a>
            </div>
       </form>
    </div>
    <!-- 底部区域 -->
    <div class="footer">
        <div class="footer-c">
           <a class="footer-link"> <img class="link-img" src="../image/logo.png"></a>
           <ul class="type-list">
            <li class="items">
                <a href="#" class="items-link">门店资讯</a>
            </li>
            <li class="items-line">|</li>
            <li class="items">
                <a href="#" class="items-link">网络购物FAQ</a>
            </li>
            <li class="items-line">|</li>        
            <li class="items">
                <a href="#" class="items-link">关于BALANCE</a>
            </li>
            <li class="items-line">|</li>        
            <li class="items">
                <a href="#" class="items-link">电子报订阅</a>
            </li>
            <li class="items-line">|</li>        
            <li class="items">
                <a href="#" class="items-link">买卖定型化契约</a>
            </li>
            <li class="items-line">|</li>        
            <li class="items">
                <a href="#" class="items-link">政府令宣传</a>
            </li>  
        </ul>
        <p class="footer-c-desc">
          <a class="link-desc" href="#">Copyright © BALANCE Ltd. All rights reserved</a>  
        </p>
        <div class="footer-box">
        <a class="footer-tdc"> <img class="link-img" src="../image/logo-erweima .png"></a>
        <a class="footer-tdc"> <img class="link-img" src="../image/erweima.png"></a>
        </div>
    </div>
    </div>
    <!-- 如果我们注册完成之后会出现一个遮罩层，提交跳转页面这是一个遮招层，将整个注册页面遮住了 -->
<div class="page-dislog">
    <div class="dislog-content">
         <a href="#" class="link-close"></a>
         <a href="#" class="link-gift" ></a>
         <p class="img-desc"><a class="desc-link" href="#">您已注册成功<br>新用户礼包已放入您的账户</a></p>
         <div class="dislog-next"><a href="#" class="next-link">下一步</a></p>
    </div>
</div>

</body>
</html>